{% extends "base.html" %}

{% block content %}
<style>
    ul > li {
        margin-bottom: 8px;
        font-size: 16px;
    }

    @media (min-width: 992px){
        .blog-container {
            width: 1170px !important
        }
    }
    
</style>
<!-- 本页样式表 -->
<link href="{{url_for('static',filename='css/about.css')}}" rel="stylesheet" />
<link href="{{url_for('static',filename='css/article.css')}}" rel="stylesheet" />
<link href="{{url_for('static',filename='css/blog.css')}}" rel="stylesheet" />
<!--https://www.gravatar.com/avatar/HASHI-->
    <!--    在没有换头像的时候默认头像-->
    <div class="blog-container">
        <blockquote class="layui-elem-quote sitemap layui-breadcrumb shadow">
            <a href="index.html" title="网站首页">网站首页</a>
            <a><cite>关于本站</cite></a>
        </blockquote>
        <div class="blog-main">
            <div class="layui-tab layui-tab-brief shadow" lay-filter="tabAbout">
                <ul class="layui-tab-title">
                    <li lay-id="2" class="layui-this">文章</li>

                    <li lay-id="1" >作者</li>
                </ul>
                <div class="layui-tab-content">
                    
                    <div class="layui-tab-item layui-show">
                        <div class="aboutinfo">
                            <div class="aboutinfo-figure">
                                <img src="{{user_data.Storage_path}}"  />
                           </div>
                           <p class="aboutinfo-nickname" >username:<span class="bisque">{{user_data.username}}</span></p>
                           {% if user_data != current_user %}
                               {% if not current_user.is_following(user_data) %}
                                   <button type="button" onclick="onclickfollow('Follow')"  class="layui-btn layui-bg-orange">关注</button>
                               {% else %}
                                   <button type="button" onclick="onclickfollow('Unfollow')" class="layui-btn layui-bg-purple">取消关注</button>
                               {% endif %}
                           {% endif %}
                           <hr />
                           <div class="layui-bg-gray" style="padding: 16px;">
                               <div class="layui-row layui-col-space15">
                                 <div class="layui-col-md6">
                                   <div class="layui-card">
                                     <div class="layui-card-header"><b>Following (关注) ：</b><span>{{user_data.followerd.count()}}</span></div>
                                     
                                   </div>
                                 </div>
                                 <div class="layui-col-md6">
                                   <div class="layui-card">
                                     <div class="layui-card-header"><b style="margin-left: 30px;">Follower (粉丝) ：</b><span>{{user_data.followers.count()}}</span></div>
                                   </div>
                                 </div>
                               </div>
                           </div>
                          
                           
                            <div class="layui-bg-gray" style="padding: 16px;">
                                <fieldset class="layui-elem-field layui-field-title animated fadeInLeftBig layui-panel" style="padding: 10px;">
                                    <legend>博客</legend>
                                    {% for item in Tweet_data %}
                                    <!-- <a href="{{url_for('article_editor')}}?id={{item.id}}"> -->
                                        <div class="article shadow animated zoomIn">
                                            <div class="article-left">
                                                <img src="/{{item.cover}}" alt="Spring Boot 表单验证@Valid">
                                            </div>
                                            <div class="article-right">
                                                <div class="article-title" style="float: left;">
                                                    <div class="article_is_yc">原创</div>&nbsp;
                                                    <a href="{{url_for('article_editor')}}?id={{item.id}}">{{item.title}}</a>
                                                </div><br /><br />
                                                <div class="article-abstract">
                                                    {% if item.text_body %}
                                                        {{item.text_body[:100]}}...
                                                    {% endif %}
                                                </div>
                                            </div>
                                            <div class="clear"></div>
                                            <div class="article-footer">
                                                <span><i class="fa fa-clock-o"></i>&nbsp;&nbsp;{{item.create_time}}</span>
                                                <span class="article-author"><i class="fa fa-user"></i>&nbsp;&nbsp;'<a href="{{url_for('user', username=item.author.username)}}">{{item.author.username}}</a> </span>
                                                
                                                <span class="article-viewinfo"><i class="fa fa-eye"></i>&nbsp;{{item.views}}</span>
                                                <!-- <span class="article-viewinfo"><i class="fa fa-commenting"></i>&nbsp;0</span> -->
                                            </div>
                                            {% if user_data == current_user %}
                                            <div class="article-footer" style="position: relative;">
                                                <a href="{{url_for('article_editor')}}?id={{item.id}}&check_look_or_edit=True" type="button" style="position: absolute;right: 50px;color: white;" class="layui-btn layui-btn-sm">
                                                    <i class="layui-icon layui-icon-edit"></i>
                                                </a>
                                                <a href="javascript:;" onclick="del('{{item.id}}')" type="button" style="position: absolute;right: 0px;color: white;"  class="layui-btn layui-btn-sm">
                                                    <i class="layui-icon layui-icon-delete"></i>
                                                </a>
                                                <div style="height: 20px;"></div>
                                            </div>
                                            {% endif %}
                                        </div>
                                    <!-- </a> -->
                                    {% endfor %}

                                </fieldset>
                            </div>
                           
                        
                            <div id="demo-laypage-layout-1"></div>
                        </div>
                    </div><!--关于网站End-->
                    <div class="layui-tab-item ">
                        <div class="aboutinfo">
                            <div class="aboutinfo-figure">
                                <img alt="博客Log" src="{{user_data.Storage_path}}" />
                                <div><a class="long_wang animated fadeInLeftBig" href="#">username:<span class="bisque">{{user_data.username}}</span></a></div>
                            </div>
                            
                            <hr />
                            <div class="aboutinfo-contact animated fadeInRightBig">
                                <a title="网站首页" href="/"><i class="fa fa-home fa-2x" style="font-size:2.5em;position:relative;top:3px"></i></a>
                                <a title="文章专栏" href="/"><i class="fa fa-file-text fa-2x"></i></a>
                                <a title="杂七杂八" href="/"><i class="fa fa-paper-plane-o fa-2x"></i></a>
                                <a title="点点滴滴" href="/"><i class="fa fa-hourglass-half fa-2x"></i></a>
                            </div>

                            
                            <div class="aboutinfo-contact animated bounceIn">
                                <p class="aboutinfo-location animated fadeInLeftBig"><i class="fa fa-location-arrow"></i>&nbsp;<span >中国</span><b style="margin-left: 30px;">Joined_at:</b>  <span style="color: #1fa2c4;">{{user_data.create_time}}</span></p>
                            </div>
                            <div class="layui-bg-gray" style="padding: 16px;">
                                <fieldset class="layui-elem-field layui-field-title animated bounceInUp layui-panel">
                                    <legend>关于我</legend>
                                    <div class="layui-field-box aboutinfo-abstract abstract-bloger ">
                                        <p style="text-align:center;">{{user_data.about_me}}</p>
                                        
                                        <h1 style="text-align:center;">The End</h1>
                                    </div>
                                </fieldset>
                            </div>
                            
                        </div>
                    </div><!--关于作者End-->
                </div>
            </div>
        </div>
        <div class="clear"></div>
    </div>
        
    <script>
        function onclickfollow(status){
            layui.use(['layer'],function(){
                var $ = layui.jquery;
                $.post("/user/{{user_data.username}}",{status:status,csrf_token:'{{ csrf_token()}}'},function(res){
                    layer.msg(res.msg,{icon:1,time: 1000},function(){
                        window.location.reload()
                    })
                })
            })
        }

        function del(id){
            layui.use(['layer'],function(){
                var $ = layui.jquery;
                layer.alert('是否确认删除',function(){
                    $.post("{{url_for('delete_Tweet')}}",{Tweet_id:id,csrf_token:'{{ csrf_token()}}'},function(res){
                        if(res.code==200){
                            layer.msg(res.msg,{icon:1,time: 1000},function(){
                                window.location.reload()
                            })
                        }else{
                            layer.msg(res.msg,{icon:1,time: 1000})
                        }
                        
                    })
                })
                
            })
        }

    </script>
    <script>
        layui.use(function(){
          var laypage = layui.laypage;
          console.log("{{ paginate.total }}")
          // 自定义排版
            laypage.render({
                elem: 'demo-laypage-layout-1',
                count: '{{ paginate.total }}',
                curr: location.hash.replace('#!page=', ''), // 初始获取 hash 值为 curr 的当前页
                hash: 'curr', // 自定义 hash 名称
                layout: ['prev', 'page', 'next'],
                skipText: ['Go to', '', 'Confirm'],
                limit: "{{ paginate.per_page }}",
                jump: function(obj, first){
                    console.log(obj); // 得到当前页，以便向服务端请求对应页的数据。
                    // 首次不执行
                    if(!first){
                        window.location.href = '{{url_for("user",username=user_data.username)}}?page='+obj.curr+'&#!page='+obj.curr           
                    }
                }
    
            });
        })
    </script>
{% endblock %}
